<template>
  <div class="blog-live2d" :class="{ right: isRight }">
    <div class="blog-btn--live2d">
      <i class="el-icon-refresh" @click="changeModel"></i>
      <i class="el-icon-goods" @click="changeTextTure"></i>
    </div>
    <!-- -->
    <canvas id="live2d" width="300" height="360"></canvas>
  </div>
</template>
<!-- 
  使用live2D-widget方法,
  1. 引用关键核心js文件
  2. 调用创建model方法
  3. 配置model接口路径  
-->
<script>
import "@/static/js/live2d/live2d.min.js";
import axios from "axios";
import store from "store";
//使用store, 存储model和衣服, 方便后面用户登录时, 直接获取model
const apiPath = "https://live2d.fghrsh.net/api/";
const MODEL_NAME = "modelIdPath";
const TEXTTURE_NAME = "modelTexturesIdPath";

export default {
  name: "VueEleLive2D",

  data() {
    return {
      modelIdPath: 0,
      modelTexturesIdPath: 0,
    };
  },
  computed: {
    waifuPath() {
      return `../src/static/js/live2d/waifu-tips.json`;
    },
    isRight() {
      return this.$store.state.live2dIsRight;
    },
  },
  created() {
    this.modelIdPath = store.get(MODEL_NAME) || 3;
    this.modelTexturesIdPath = store.get(TEXTTURE_NAME) || 51;
  },
  mounted() {
    this.createModel();
  },

  methods: {
    createModel() {
      store.set(MODEL_NAME, this.modelIdPath);
      store.set(TEXTTURE_NAME, this.modelTexturesIdPath);
      window.loadlive2d(
        "live2d",
        `${apiPath}get/?id=${this.modelIdPath}-${this.modelTexturesIdPath}`
      );
    },
    async changeTextTure() {
      let result = await axios.get(
        `${apiPath}rand_textures/?id=${this.modelIdPath}-${this.modelTexturesIdPath}`
      );
      this.modelTexturesIdPath = result.data?.textures?.id;
      if (
        this.modelTexturesIdPath === 1 &&
        (this.modelTexturesIdPath === 1 ||
          this.modelTexturesIdPath === 0 ||
          this.modelTexturesIdPath === undefined)
      ) {
        console.log("我还没有其他衣服呢！");
        return;
      }
      this.createModel();
      // this.createModel(randModel)
    },
    async changeModel() {
      let result = await axios.get(`${apiPath}switch/?id=${this.modelIdPath}`);
      this.modelIdPath = result.data?.model?.id;
      this.modelIdPath === 5 && (this.modelIdPath += 2);
      console.log(this.modelIdPath);
      if (this.modelIdPath === undefined) {
        return;
      }
      this.createModel();
    },
  },
};
</script>
<style lang="stylus" 
>
.blog-live2d {
  // 
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 300px;

  &:hover .blog-btn--live2d {
    display: flex;
  }
}

.blog-live2d.right {
  left: auto;
  right: 0;
}

.blog-btn--live2d {
  position: absolute;
  top: 20px;
  left: 0;
  display: none;
  flex-direction: column;

  & i {
    font-size: 28px;
    cursor: pointer;
  }
}
</style>